<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <script>
       /* 需求：替换字符串中的颜色
       原理： 把字符串 a  替换成  <span style="color:red">a</span>
       */
       let str = 'abcdaefg123abc456abcABC123ABC456';
       

       //1.核心思路： 把 字符串替换成 带样式的span标签
       /* 
       发现问题： 默认情况下，replace方法只能替换匹配的第一个
       解决问题： 使用正则表达式替换
         修饰符 :    g : 全局匹配  i:不区分大小写  m:识别换行符
       */
       let str1 = str.replace('a','<span style="color:red">a</span>')
       document.write(str1)
       document.write('<br>')

       //2.使用正则表达式替换所有的a
       /* 发现问题： g只能替换所有小写的a，无法替换大写A
          解决问题： 使用修饰符 i 
       */
       let reg =  new RegExp(/a/g)
       let res2 = str.replace(reg,'<span style="color:red">a</span>')
       document.write(res2)
       document.write('<br>')

        //3.使用正则表达式i替换大写A
        /* 
        发现问题：  使用ig之后， 会把所有的大写A替换成小写a
        需求：  大写A变成红色大写A，小写a变成红色小写a  (只变颜色，大小写不变)
        解决问题： 使用replace方法的第二个参数，传入回调函数
        */
       let reg3 =  new RegExp(/a/ig)
       let res3 = str.replace(reg3,'<span style="color:red">a</span>')
       document.write(res3)
       document.write('<br>')
       /**
       * @description:替换字符串
       * @param {regexp|substr} : 第一个参数，要替换的字符串（支持字符串类型与正则表达式）
       * @param {newSubStr|function} : 第二个参数，替换后的新字符串
       *    字符串类型： 全部替换成这个字符串
       *    函数 ： 替换指定字符串
       * @return: 
       */ 
       let reg4 =  new RegExp(/a/ig)
       let res4 = str.replace(reg4,function(match){
           //match:就是第一个参数正则表达式的匹配结果
           //这个函数会执行多次，第一个参数正则每匹配一次，这个函数就会执行一次
           //返回值： 当前匹配值想要替换的结果
           console.log(match);
           return `<span style="color:red">${match}</span>`
           
       })
       document.write(res4)
    
    </script> 
</body>
</html>